<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Summernote</title>
    <meta name="description" content="Super simple wysiwyg editor on bootstrap">
    <meta name="author" content="Summernote team">

    <!-- include libs stylesheets -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" />
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/codemirror.css" />
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/blackboard.css">
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.20.0/theme/monokai.css">

    <!-- summernote with less and requirejs -->
    <link rel="stylesheet/less" type="text/css" href="src/less/summernote.less" />
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar">&nbsp;</span>
            <span class="icon-bar">&nbsp;</span>
            <span class="icon-bar">&nbsp;</span>
          </button>
          <a class="navbar-brand" href="#">Summernote</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Themes</a></li>
          </ul>
        </div>
      </div>
    </nav>
    <div class="container" style="margin-top: 60px;">
      <h4>
        <span class="label label-info">Bootstrap v3.3.5</span>
        <span class="label label-success">font-awesome v4.3.0</span>
        <span class="label label-danger">CodeMirror v3.20.0</span>
      </h4>
      <div class="well bs-component">
        <form class="form-horizontal" action="#">
          <fieldset>
            <legend>Forms</legend>
            <div class="form-group">
              <label for="select" class="col-lg-2 control-label">Themes</label>
              <div class="col-lg-10">
                <select class="form-control" id="select">
                </select>
              </div>
            </div>
            <div class="form-group">
              <label for="textArea" class="col-lg-2 control-label">Textarea</label>
              <div class="col-lg-10">
                 <div class="summernote" id="summernote"></div>
              </div>
            </div>
          </fieldset>
        </form>
        <div id="source-button" class="btn btn-primary btn-xs" style="display: none;">&lt; &gt;</div></div>
    </div><!-- /.container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="//code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
      less = {
        env: "development", // or "production"
        async: true,       // load imports async
        fileAsync: false,   // load imports async when in a page under
        // a file protocol
        poll: 1000,         // when in watch mode, time in ms between polls
        functions: {},      // user functions, keyed by name
        dumpLineNumbers: "comments", // or "mediaQuery" or "all"
        relativeUrls: false,// whether to adjust url's to be relative
        // if false, url's are already relative to the
        // entry less file
        rootpath: ":/a.com/"// a path to add on to the start of every url
        //resource
      };
    </script>
    <script>
      var themes = {
        "default": "//netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css",
        "cerulean" : "//bootswatch.com/cerulean/bootstrap.css",
        "cosmo" : "//bootswatch.com/cosmo/bootstrap.css",
        "cyborg" : "//bootswatch.com/cyborg/bootstrap.css",
        "darkly" : "//bootswatch.com/darkly/bootstrap.css",
        "flatly" : "//bootswatch.com/flatly/bootstrap.css",
        "lumen" : "//bootswatch.com/lumen/bootstrap.css",
        "paper" : "//bootswatch.com/paper/bootstrap.css",
        "journal" : "//bootswatch.com/journal/bootstrap.css",
        "readable" : "//bootswatch.com/readable/bootstrap.css",
        "sandstone" : "//bootswatch.com/sandstone/bootstrap.css",
        "simplex" : "//bootswatch.com/simplex/bootstrap.css",
        "slate" : "//bootswatch.com/slate/bootstrap.css",
        "spacelab" : "//bootswatch.com/spacelab/bootstrap.css",
        "superhero" : "//bootswatch.com/superhero/bootstrap.css",
        "united" : "//bootswatch.com/united/bootstrap.css",
        "yeti" : "//bootswatch.com/yeti/bootstrap.css",
      }

      $(function (){
        var $themesheet = $('<link href="'+themes['default']+'" rel="stylesheet" />')
        $themesheet.appendTo('head');

        var options = $.map(themes, function (url, theme) {
          return '<option value="' + theme + '">' + theme + '</option>';
        }).join('');

        $('#select').html(options).on('change', function(){
          $themesheet.attr('href', themes[$(this).val()]);
        });
      });
      </script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js" type="text/javascript"></script>
      <script data-main="src/js/app" src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.9/require.min.js"></script>
  </body>
</html>
